<template>
  <view
    class="tn-progress-line"
    :class="[progressClass]"
    :style="progressStyle"
  >
    <!-- 进度 -->
    <view
      class="tn-progress-line__active"
      :class="[progressActiveClass]"
      :style="progressActiveStyle"
    >
      <slot>
        <view v-if="showValue" class="value">{{ percentValue }}%</view>
      </slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { lineProgressProps } from '../../../types/tn-progress'
import { ColorInfo } from '../../../types/tuniao-ui'
import { computed, CSSProperties, nextTick, onMounted, ref, watch } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'

const props = defineProps(lineProgressProps)

// 解析颜色
const { splitColorInfo } = useComponentColor()
// 解析激活时颜色
const activeColor = computed<ColorInfo>(() => {
  return splitColorInfo('bg', props?.activeColor || '')
})
// 解析未激活时颜色
const inactiveColor = computed<ColorInfo>(() => {
  return splitColorInfo('bg', props?.inactiveColor || '')
})

// progress样式
const progressStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.height) {
    style.height = handleValueWithUnit(props.height)
    style.fontSize = style.height
  }
  if (inactiveColor.value.type === 'style') style.backgroundColor = inactiveColor.value.value
  return style
})
// progressActive样式
const progressActiveStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.duration) style.transition = `width ${Number(props.duration) / 1000}s ease`
  style.width = percentValue.value + '%'
  if (activeColor.value.type === 'style') style.backgroundColor = activeColor.value.value
  return style
})

// progress对应的类
const progressClass = computed<string>(() => {
  let clazz: string[] = []
  if (inactiveColor.value.type === 'class') clazz.push(inactiveColor.value.value)
  return clazz.join(' ')
})
// progressActive对应的类
const progressActiveClass = computed<string>(() => {
  let clazz: string[] = []
  if (activeColor.value.type === 'class') clazz.push(activeColor.value.value)
  if (props.striped) {
    clazz.push('striped')
    if (props.stripedAnimation) clazz.push('striped--animation')
  }
  return clazz.join(' ')
})

// 进度值
let percentValue = ref<number>(0)
watch(() => props.percent, (val: string | number) => {
  val = Number(val)
  percentValue.value = val > 100 ? 100 : val
})
onMounted(() => {
  // 下一个周期再进行赋值保证动画执行
  nextTick(() => {
    percentValue.value = Number(props.percent)
  })
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-progress-line {
  position: relative;
  width: 100%;
  background-color: #E6E6E6;
  border-radius: 100rpx;
  overflow: hidden;
  height: 24rpx;
  font-size: 24rpx;

  &__active {
    width: 0%;
    height: 100%;
    background-color: $tn-main-color;
    transition: width 2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;

    &.striped {
      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
      background-size: 80rpx 80rpx;
      &--animation {
        animation: progress-striped 2s linear infinite;
      }
    }

    .value {
      transform: scale(0.8);
    }
  }
}
@keyframes progress-striped {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80rpx 0;
  }
}
</style>
